<span style="font-size:18px;"><!DOCTYPE html>  
<html>  
  <head>  
    <title>Blend Modes</title>  
    <link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">  
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->  
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>  
    <script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script>  
    <style>  
      .map{  
        background-repeat: repeat;  
        background-image: url();  
      }  
    </style>  
  </head>  
  <body>  
    <div id="map" class="map"></div>  
    <form class="form-horizontal">  
      <label>  
        <select id="blend-mode" class="form-control">  
          <option value="source-over">source-over (default)</option>  
          <option>source-in</option>  
          <option>source-out</option>  
          <option>source-atop</option>  
          <option>destination-over</option>  
          <option>destination-in</option>  
          <option>destination-out</option>  
          <option>destination-atop</option>  
          <option>lighter</option>  
          <option>copy</option>  
          <option>xor</option>  
          <option>multiply</option>  
          <option>screen</option>  
          <option>overlay</option>  
          <option>darken</option>  
          <option>lighten</option>  
          <option>color-dodge</option>  
          <option>color-burn</option>  
          <option>hard-light</option>  
          <option>soft-light</option>  
          <option selected>difference</option>  
          <option>exclusion</option>  
          <option>hue</option>  
          <option>saturation</option>  
          <option>color</option>  
          <option>luminosity</option>  
        </select>  
        Canvas compositing / blending mode  
      </label>  
      <label>  
        <input type="checkbox" id="affect-red" checked>  
        Red circle affected  
      </label>  
      <label>  
        <input type="checkbox" id="affect-green" checked>  
        Green circle affected  
      </label>  
      <label>  
        <input type="checkbox" id="affect-blue" checked>  
        Blue circle affected  
      </label>  
    </form>  
    <script>  
      // Create separate layers for red, green an blue circles.  
      // 为红、绿、蓝三个圆分别创建图层  
      // Every layer has one feature that is styled with a circle,  
     // 每一个图层都有一个设置了circle样式的要素  
      // together the features form the corners of an equilateral triangle and their styles overlap  
      // 同时这些要素处于一个等边三角形的各个角上而且他们的样式相互重叠  
       var redLayer = new ol.layer.Vector({  
        source: new ol.source.Vector({  
          features: [new ol.Feature(new ol.geom.Point([0, 0]))]  
        }),  
        style: new ol.style.Style({  
          image: new ol.style.Circle({  
            fill: new ol.style.Fill({  
              color: 'rgba(255,0,0,0.8)'  
            }),  
            stroke: new ol.style.Stroke({  
              color: 'rgb(255,0,0)',  
              width: 15  
            }),  
            radius: 120  
          })  
        })  
      });  
      var greenLayer = new ol.layer.Vector({  
        source: new ol.source.Vector({  
          // 433.013 is roughly 250 * Math.sqrt(3)  
          features: [new ol.Feature(new ol.geom.Point([250, 433.013]))]  
        }),  
        style: new ol.style.Style({  
          image: new ol.style.Circle({  
            fill: new ol.style.Fill({  
              color: 'rgba(0,255,0,0.8)'  
            }),  
            stroke: new ol.style.Stroke({  
              color: 'rgb(0,255,0)',  
              width: 15  
            }),  
            radius: 120  
          })  
        })  
      });  
      var blueLayer = new ol.layer.Vector({  
        source: new ol.source.Vector({  
          features: [new ol.Feature(new ol.geom.Point([500, 0]))]  
        }),  
        style: new ol.style.Style({  
          image: new ol.style.Circle({  
            fill: new ol.style.Fill({  
              color: 'rgba(0,0,255,0.8)'  
            }),  
            stroke: new ol.style.Stroke({  
              color: 'rgb(0,0,255)',  
              width: 15  
            }),  
            radius: 120  
          })  
        })  
      });  
  
      // Create the map, the view is centered on the triangle. Zooming and panning is  
      // restricted to a sane area  
      // 创建地图,视图中心在三角形的中心,且缩放和平移都限制在一个合理的范围内  
     var map = new ol.Map({  
        layers: [  
          redLayer,  
          greenLayer,  
          blueLayer  
        ],  
        target: 'map',  
        view: new ol.View({  
          center: [250, 220],  
          extent: [0, 0, 500, 500],  
          resolution: 4,  
          minResolution: 2,  
          maxResolution: 32  
        })  
      });  
  
      // Get the form elements and bind the listeners  
      // 获取元素并绑定监听器  
      var select = document.getElementById('blend-mode');  
      var affectRed = document.getElementById('affect-red');  
      var affectGreen = document.getElementById('affect-green');  
      var affectBlue = document.getElementById('affect-blue');  
  
  
      /**  
       * This method sets the globalCompositeOperation to the value of the select  
       * field and it is bound to the precompose event of the layers.  
       * 这个方法用来把选中的字段设置为globalCompositeOperation的属性值，并绑定到图层的precompose事件中  
       * @param {ol.render.Event} evt The render event.  
       */  
      var setBlendModeFromSelect = function(evt) {  
        evt.context.globalCompositeOperation = select.value;  
      };  
  
  
      /**  
       * This method resets the globalCompositeOperation to the default value of  
       * 'source-over' and it is bound to the postcompose event of the layers.  
       * 这个方法把globalCompositeOperation重置为默认的source-over属性，并绑定到图层postcompose事件中  
       * @param {ol.render.Event} evt The render event.  
       */  
      var resetBlendModeFromSelect = function(evt) {  
        evt.context.globalCompositeOperation = 'source-over';  
      };  
  
  
      /**  
       * Bind the pre- and postcompose handlers to the passed layer.  
       * 绑定precompose和postcompose事件处理到传入的图层中  
       * @param {ol.layer.Vector} layer The layer to bind the handlers to.  
       */  
      var bindLayerListeners = function(layer) {  
        layer.on('precompose', setBlendModeFromSelect);  
        layer.on('postcompose', resetBlendModeFromSelect);  
      };  
  
  
      /**  
       * Unind the pre- and postcompose handlers to the passed layers.  
       * 取消绑定precompose和postcompose事件处理到传入的图层中  
       * @param {ol.layer.Vector} layer The layer to unbind the handlers from.  
       */  
      var unbindLayerListeners = function(layer) {  
        layer.un('precompose', setBlendModeFromSelect);  
        layer.un('postcompose', resetBlendModeFromSelect);  
      };  
  
  
      /**  
       * Handler for the click event of the 'affect-XXX' checkboxes.  
       * 处理affect-XXX复选框的单击事件  
       * @this {HTMLInputElement}  
       */  
      var affectLayerClicked = function() {  
        var layer;  
        if (this.id == 'affect-red') {  
          layer = redLayer;  
        } else if (this.id == 'affect-green') {  
          layer = greenLayer;  
        } else {  
          layer = blueLayer;  
        }  
        if (this.checked) {  
          bindLayerListeners(layer);  
        } else {  
          unbindLayerListeners(layer);  
        }  
        map.render();  
      };  
  
  
      // Rerender map when blend mode changes  
     // 当混合模式改变时渲染地图  
      select.addEventListener('change', function() {  
        map.render();  
      });  
  
      // Unbind / bind listeners depending on the checked state when the checkboxes  
      // are clicked  
      // 取消绑定/绑定监听取决于复选框是否被单击  
     affectRed.addEventListener('click', affectLayerClicked);  
      affectGreen.addEventListener('click', affectLayerClicked);  
      affectBlue.addEventListener('click', affectLayerClicked);  
  
      // Initially bind listeners  
      // 初始化绑定监听  
     bindLayerListeners(redLayer);  
      bindLayerListeners(greenLayer);  
      bindLayerListeners(blueLayer);  
    </script>  
  </body>  
</html></span>  